/* 全局样式变量 - 亮色主题 */
:root {
    /* 颜色 */
    --app-bg-color: #f5f7fa;
    --app-card-bg: rgba(255, 255, 255, 0.8);
    --app-border-color: #e4e7ed;
    --app-text-primary: #303133;
    --app-text-regular: #606266;
    --app-text-secondary: #909399;

    /* 阴影 */
    --app-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
    --app-shadow-regular: 0 8px 16px rgba(0, 0, 0, 0.08);
    --app-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
    --app-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* 背景填充 */
    --app-fill-light: rgba(245, 247, 250, 0.6);
    --app-fill-regular: rgba(236, 245, 255, 0.6);
    --app-primary-light: rgba(64, 158, 255, 0.1);
    --app-primary-regular: rgba(64, 158, 255, 0.2);

    /* 圆角 */
    --app-radius-md: 16px;
    --app-radius-sm: 6px;

    /* 渐变 */
    --app-gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    --app-gradient-button: linear-gradient(135deg, #409EFF, #3a8ee6);
    --app-gradient-title: linear-gradient(90deg, #409EFF, #36D1DC);

    /* 动画过渡 */
    --app-transition-fast: all 0.2s ease;
    --app-transition-normal: all 0.3s ease;

    /* 间距 */
    --app-spacing-xs: 4px;
    --app-spacing-sm: 8px;
    --app-spacing-base: 12px;
    --app-spacing-md: 16px;
    --app-spacing-lg: 24px;
    --app-spacing-xl: 32px;

    /* 字体大小 */
    --app-font-size-xs: 12px;
    --app-font-size-sm: 13px;
    --app-font-size-base: 14px;
    --app-font-size-md: 16px;
    --app-font-size-lg: 18px;
    --app-font-size-xl: 20px;
    --app-font-size-xxl: 24px;

    /* 行高 */
    --app-line-height-compact: 1.3;
    --app-line-height-normal: 1.5;
    --app-line-height-relaxed: 1.8;

    /* 字间距 */
    --app-letter-spacing-tight: -0.02em;
    --app-letter-spacing-normal: 0;
    --app-letter-spacing-wide: 0.02em;
}